<template>
  <div class="performance-card" @click="navigateToDetail">
<!--    <img :src="image" :alt="title" class="performance-card__image" />-->
    <img :src="firstImage" :alt="title" class="performance-card__image" />

    <div class="performance-card__info">
      <h4>{{ title }}</h4>
      <p>{{ performer }}  {{place}}</p>
      <p>{{description}}</p>
    </div>
  </div>
</template>

<script>
import gotoUrl from "../mixins/gotoUrl";
export default {
  name: 'PerformanceCard',
  props: {
    title: {
      type: String,
      required: true
    },
    performer: {
      type: String,
      required: true
    },
    image: {
      type: String,
      required: true
    },
    place: {
      type: String,
      required: true
    },
    to: {
      type: String,
      required: true
    },
    description: {
      type: String,
      required: true
    }
  },
  computed: {
    firstImage() {
      // Split the 'image' string by comma and take the first part
      return this.image.split(',')[0];
    }
  },
  methods: {
    navigateToDetail() {
      this.$router.push(this.to);
    }
  }
}
</script>

<style scoped>
.performance-card {
  cursor: pointer;
  overflow: hidden;
  transition: box-shadow 0.3s;
  position: relative;
  width: 339px;
  height: 311px;
  margin: 0px 67px 0px 53px;
  border: 1px solid #ccc;
}

.performance-card:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  transform: translateY(-10px);
  border-color: #000;}

.performance-card__image {
  width: 100%;
  height: 70%;
  object-fit: cover;
}

.performance-card__info {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: #FFFFFF;
  padding: 10px;
  text-align: center;
  width: 91%;
  border: 1px solid #0b0b0b;

}

.performance-card__info h4 {
  margin: 0;
  text-align: center;
  font-size: 18px;
  color: #0b0b0b;
}

.performance-card__info p {
  margin: 5px 0 0 0;
  color: #666;
}
</style>
